<template>
  <div class="app-container">

    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

      <el-col :span="6">
        <el-form-item label="公司名称:" prop="companyName">
          <el-input maxlength="30" v-model="queryParams.companyName" clearable placeholder="请输入公司名称"></el-input>
        </el-form-item>
      </el-col>

    </SearchContent>

    <div class="card-wrap card-padding" :model="queryParams">
      <div class="table-title-wrap justify-end">
        <el-button type="primary" size="mini" @click="handleAdd"
                   v-hasPermi="['driverManage:laberCompany:add']">新增</el-button>
        <el-button type="success" size="mini" @click="handleExport"
                   v-hasPermi="['driverManage:laberCompany:export']">导出</el-button>
<!--        <el-button type="warning" size="mini"-->
<!--                   v-hasPermi="['driverManage:laberCompany:batchadd']">批量导入</el-button>-->

      </div>

      <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" min-width="130" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <e-button size="mini" type="text" @click="handleUpdate(scope.row)" v-if="0==scope.row.approvalStatus||3==scope.row.approvalStatus||4==scope.row.approvalStatus"
                        v-hasPermi="['driverManage:laberCompany:edit']">编辑</e-button>
              <e-button size="mini" type="text" @click="handleDelete(scope.row)" v-if="(0==scope.row.approvalStatus||2==scope.row.approvalStatus||3==scope.row.approvalStatus||4==scope.row.approvalStatus) && 0==scope.row.delStatus"
                        v-hasPermi="['driverManage:laberCompany:delete']">删除</e-button>
              <e-button size="mini" type="text" @click="handleDetail(scope.row)"
                        v-hasPermi="['driverManage:laberCompany:view']">查看</e-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column min-width="210" show-overflow-tooltip label="公司编码" align="center" prop="companyCode" >
            <template v-slot="{row}">
              {{row.companyCode|filterNull}}
            </template>
          </el-table-column>
          <el-table-column min-width="130" show-overflow-tooltip label="公司名称" align="center" prop="companyName" >
            <template v-slot="{row}">
              {{row.companyName|filterNull}}
            </template>
          </el-table-column>
          <el-table-column min-width="190" show-overflow-tooltip label="地址" align="center" prop="companyAddr" >
            <template v-slot="{row}">
              {{row.companyAddr|filterNull}}
            </template>
          </el-table-column>
          <el-table-column min-width="130" show-overflow-tooltip label="审批状态" align="center" prop="expenseStatus" >
            <template v-slot="{row}">
              {{row.expenseStatus|filterNull}}
            </template>
          </el-table-column>
          <el-table-column min-width="130" show-overflow-tooltip label="联系人" align="center" prop="contact" >
            <template v-slot="{row}">
              {{row.contact|filterNull}}
            </template>
          </el-table-column>
          <el-table-column min-width="130" show-overflow-tooltip label="联系电话" align="center" prop="contactPhone" >
            <template v-slot="{row}">
              {{row.contactPhone|filterNull}}
            </template>
          </el-table-column>
        </template>
      </table-page>
    </div>

  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {driverCompanyList, driverCompanyDelete} from "@/api/memberManage/driverList";
import {supplierDelete} from "@/api/memberManage/vendorList";

export default {
    name:"LaberCompany",
  components: {
    SearchContent
  },
  data() {
    return {
      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      isNew:true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName:null,
      },
      total: 0,
      dataList: [],
    };
  },
  created() {
    this.getList()
  },
    activated() {
        this.getList()
    },
  methods: {
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;


      driverCompanyList(this.queryParams).then(res => {
        if (res.code == "200") {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false;
        }

      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        companyName:null,
      },
        // this.resetForm("queryForm");
        this.handleQuery();
    },

    /** 新增操作 */
    handleAdd() {
      // this.$router.push({
      this._toPage({
        name: 'laberCompanyAdd',
        query: {type: 'write', pageType:'新增劳务公司'}
      })
    },

    handleDetail(row){
      // this.$router.push({
      this._toPage({
        // name: 'laberCompanyDetail',
        name: 'laberCompanyAdd',
        query: {companyId: row.companyId, type: 'readonly', pageType:'劳务公司详情'}
      })
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.$router.push({
      this._toPage({
        // name: 'laberCompanyEdit',
        name: 'laberCompanyAdd',
        query: {companyId: row.companyId, type: 'write', pageType:'编辑劳务公司'}
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('/driver/driverCompany/export', {
        ...this.queryParams
      }, `劳务公司列表.xlsx`)
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      // this.$modal.confirm('确定删除？').then(() => {
      //   this.loading = true;
      //   return driverCompanyDelete(row.companyId);
      // }).then(() => {
      //   this.loading = false;
      //   this.handleQuery();
      //   this.$modal.msgSuccess("删除已提交");
      // }).finally(() => {
      //   this.loading = false;
      // });

        this.$prompt('删除理由', '确定删除?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPlaceholder:"删除理由为必填项",
            inputPattern: /^(?!\s+$).{1,500}$/,
            inputErrorMessage: '备注不能为空且不能大于500字'
        }).then(({value}) => {
            this.loading = true;
            return driverCompanyDelete({companyIds:row.companyId, delRemark:value});
        }).then(() => {
            this.loading = false;
            this.handleQuery();
            this.$modal.msgSuccess("删除已提交");
        }).finally(() => {
            this.loading = false;
        });
    },

  }
};
</script>


<style lang="scss" scoped>
.pagination-container{
  padding: 0 20px 50px !important;
}


.form-dialog {
  ::v-deep .el-dialog__header {
    padding: 10px 20px;
    border-bottom: 1px solid #DCDFE6;

    .el-dialog__headerbtn {
      top: 15px;
    }
  }

  .box-card {
    margin-bottom: 20px;

    .card-title {
      font-size: 16px;
      position: relative;
      margin-left: 8px;
      padding: 0;
    }

    .card-title::after {
      content: '';
      width: 4px;
      height: 18px;
      background-color: aqua;
      display: block;
      position: absolute;
      left: -12px;
      top: 2px;
    }
  }

}
</style>
